import React from "react";
import 'react-native-gesture-handler';
import { Dimensions, Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MainBottomRoute } from '@/config/config'
import Main from '@/pages/main'
import Mine from '@/pages/mine'

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {

    return (
        <Tab.Navigator initialRouteName='Wallet'
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused }) => {
                    let source
                    if (route.name === 'Wallet' && focused) {
                        source = "WalletSelected"
                    } else if (route.name === 'Wallet' && !focused) {
                        source = "WalletNoSelected"
                    } else if (route.name === 'Me' && focused) {
                        source = "MineSelected"
                    } else if (route.name === 'Me' && !focused) {
                        source = "MineNoSelected"
                    }
                    return <Image source={MainBottomRoute[source]} style={{ width: 32 * ratio, height: 32 * ratio }} />
                },
                tabBarActiveTintColor: '#FFFFFF',
                tabBarInactiveTintColor: '#707070',
                tabBarActiveBackgroundColor: '#5A72EC',
                tabBarStyle: {
                    height: 60 * ratio,
                    width: width
                },
                tabBarLabelStyle: {
                    fontSize: 12,
                    fontFamily: 'Microsoft YaHei',
                    fontWeight: '400',
                    lineHeight: 16,
                    marginBottom: 6 * ratio
                }
            })}
        >
            <Tab.Screen name="Wallet" component={Main} options={{ headerShown: false }} />
            <Tab.Screen name="Me" component={Mine} options={{ headerShown: false }} />
        </Tab.Navigator>

    );
}

export default BottomTabNavigator;